<!---- Creator: Eoly -->
<!---- On 2017/1/10 -->
<!---- Call http://palerock.cn -->

<!--
    添加地址信息API：
    method:POST
    url:'http://palerock.cn/h5_back/user/add-address'

    请求头:
    Authorization:'Bearer '+token 密文记录

    data:
    {                           // 发送json参数
        'addressInfo':          //详细地址信息
        'addressPhoneNum':      //联系电话
        'addressNickName':      //称呼
    }
    返回：
    {

        id:         // 添加成功的地址id

        error:      // '0'则为操作成功

        mes:        // 操作后返回的信息
    }
-->

<!--
    获取地址信息API：
    method:GET
    url:'http://palerock.cn/h5_back/user/show-address'

    请求头:
    Authorization:'Bearer '+token 密文记录

    data:
    {                           // 发送json参数
        无
    }
    返回：
    {
        dataList:       // 返回的地址信息列表
            {
                address:
                {
                    addressId:          //地址id
                    userId:             //用户id
                    addressInfo:        //详细地址信息
                    addressPhoneNum:    //联系电话
                    addressNickName:    //称呼
                }
                ...

            }

        error:      // '0'则为操作成功

        mes:        // 操作后返回的信息
    }
-->

<!--
    删除地址信息API：
    method:POST
    url:'http://palerock.cn/h5_back/user/delete-address'

    请求头:
    Authorization:'Bearer '+token 密文记录

    data:
    {                           // 发送json参数
        addressId:              //地址id
        userId:                 //用户id
        addressInfo:            //详细地址信息
        addressPhoneNum:        //联系电话
        addressNickName:        //称呼
    }
    返回：
    {

        error:      // '0'则为操作成功

        mes:        // 操作后返回的信息
    }
-->

<!--
    修改地址信息API：
    method:POST
    url:'http://palerock.cn/h5_back/user/edit-address'

    请求头:
    Authorization:'Bearer '+token 密文记录

    data:
    {                           // 发送json参数
        addressId:              //地址id
        userId:                 //用户id
        addressInfo:            //详细地址信息
        addressPhoneNum:        //联系电话
        addressNickName:        //称呼
    }
    返回：
    {

        error:      // '0'则为操作成功

        mes:        // 操作后返回的信息
    }
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>AngularTest</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            /*border: 0;*/
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
    </style>
    <script src="../angular.js"></script>
    <script>

        var net = "http://palerock.cn/h5_back";
//        var net = "http://localhost:8080";


        //读取本地缓存
        var token = localStorage.getItem("token");

        if(!token){
            alert("您还没有登录");
            location.href = "登陆简单演示.html";
        }

        var app = angular.module('app', [])
                .config(function($httpProvider) {
                        //设置请求头附带 token
                        $httpProvider.defaults.headers.common.Authorization = 'Bearer ' + token;
        });

        app.controller('info', function ($scope, $http) {

            //在input中填写的信息
            $scope.addressInfo='';
            $scope.addressPhoneNum='';
            $scope.addressNickName='';

            //获取的用户地址列表
            $scope.addresses=[];

            //添加地址
            $scope.addAddress = function(){

                //将输入的地址信息封装为一个json
                var address = {'addressInfo':$scope.addressInfo,'addressPhoneNum':$scope.addressPhoneNum,'addressNickName':$scope.addressNickName};

                if(token){
                    //发起请求
                    $http.post(net+'/user/add-address',address).then(function(res){
                        console.log(res);
                        if(!res.data.error){
                            alert('添加成功，你的id是：'+res.data.id);
                            //重新获取地址列表刷新
                            $scope.getAddresses();

                            //重置输入框
                            $scope.addressInfo='';
                            $scope.addressPhoneNum='';
                            $scope.addressNickName='';
                        }else{
                            alert("错误代码:"+res.data.error+","+res.data.mes)
                        }
                    },function(){
                        alert('添加失败');
                    })
                }
            };

            //删除某一地址（参数为传入的一个地址json）
            $scope.deleteAddress = function(address){
                if(token){
                    $http.post(net+'/user/delete-address',address).then(function(res){
                        console.log(res);
                        if(!res.data.error){
                            alert('删除成功');
                            //重新获取地址列表刷新
                            $scope.getAddresses();
                        }else{
                            alert("错误代码:"+res.data.error+","+res.data.mes)
                        }
                    },function(){
                        alert('删除失败');
                    })
                }
            };

            //提交某一地址的修改（参数为传入的一个地址json）
            $scope.editAddress = function(address){
                if(token){
                    console.log(address);
                    $http.post(net+'/user/edit-address',address).then(function(res){
                        console.log(res);
                        if(!res.data.error){
                            alert('修改成功');
                            //重新获取地址列表刷新
                            $scope.getAddresses();
                        }else{
                            alert("错误代码:"+res.data.error+","+res.data.mes)
                        }
                    },function(){
                        alert('删除失败');
                    })
                }
            };

            //获取用户地址列表
            $scope.getAddresses = function(){
                if(token){
                    $http.get(net+'/user/show-address').then(function(res){
                        console.log(res);
                        if(!res.data.error){
                            $scope.addresses = res.data.dataList;
                        }else{
                            alert("错误代码:"+res.data.error+","+res.data.mes)
                        }
                    },function(){
                        alert('网络或设置错误');
                    })
                }
            };
            $scope.logout = function(){
                localStorage.removeItem("token");
                alert("您已注销成功");
                location.reload();
            }
        });
    </script>
</head>
<body ng-app="app">
<div ng-controller="info" ng-init="getAddresses()">
    <input type="text" ng-model="addressInfo" placeholder="地址"/>
    <input type="text" ng-model="addressPhoneNum" placeholder="电话号码"/>
    <input type="text" ng-model="addressNickName" placeholder="称呼"/>
    <button ng-click="addAddress()">添加地址信息</button>
    <button ng-click="getAddresses()">显示地址信息</button>
    <button ng-click="logout()">注销</button>
    <div>
        <table style="border: 1px solid black">
            <tr>
                <td>地址</td>
                <td>电话</td>
                <td>称呼</td>
                <td>操作</td>
            </tr>
            <tr ng-repeat="address in addresses">
                <td> <input type="text" ng-model="address.addressInfo" placeholder="地址"/></td>
                <td><input type="text" ng-model="address.addressPhoneNum" placeholder="电话号码"/></td>
                <td><input type="text" ng-model="address.addressNickName" placeholder="称呼"/></td>
                <td>
                    <button ng-click="deleteAddress(address)">删除</button>
                    <button ng-click="editAddress(address)">提交修改</button>
                </td>
            </tr>
        </table>
    </div>
</div>

</body>
</html>